HTMX এবং WebSocket ব্যবহার করে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন
HTMX এবং WebSocket এর সমন্বয়ে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করা সম্ভব। এই প্রকল্পে আমরা Flask ফ্রেমওয়ার্ক ব্যবহার করব এবং Flask-SocketIO লাইব্রেরি দিয়ে WebSocket বাস্তবায়ন করব। HTMX ব্যবহার করে আমরা সহজেই AJAX কল করতে পারব।
১. পরিবেশ সেটআপ
১.১. প্রয়োজনীয় লাইব্রেরি ইনস্টল করুন
pip install Flask Flask-SocketIO
২. Flask অ্যাপ তৈরি করুন
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template_string('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Chat App</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<style>
body {
font-family: Arial, sans-serif;
}
#messages {
border: 1px solid #ccc;
padding: 10px;
height: 300px;
overflow-y: scroll;
}
.message {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>Real-time Chat App</h1>
<div id="messages"></div>
<form id="chat-form" onsubmit="sendMessage(event)">
<input type="text" id="message" placeholder="Type a message..." required>
<button type="submit">Send</button>
</form>
<script>
const socket = io();
socket.on('message', function(data) {
const messageDiv = document.createElement('div');
messageDiv.className = 'message';
messageDiv.innerText = data;
document.getElementById('messages').appendChild(messageDiv);
// Scroll to the bottom of the messages
const messagesDiv = document.getElementById('messages');
messagesDiv.scrollTop = messagesDiv.scrollHeight;
});
function sendMessage(event) {
event.preventDefault();
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.emit('send_message', message);
messageInput.value = '';
}
</script>
</body>
</html>
''')
@socketio.on('send_message')
def handle_message(msg):
emit('message', msg, broadcast=True) # Broadcast message to all clients
if __name__ == '__main__':
socketio.run(app, debug=True)
৩. ব্রাউজারে পরীক্ষা করা
Flask সার্ভার চালান:
python app.py
ব্রাউজারে http://127.0.0.1:5000/ URL এ যান।
একটি ট্যাব খুলুন এবং মেসেজ টাইপ করুন। নতুন ট্যাব খুলে মেসেজ পাঠান এবং দেখুন কিভাবে রিয়েল-টাইমে চ্যাট আপডেট হচ্ছে।
সারসংক্ষেপ
- HTMX এবং WebSocket: HTMX ব্যবহার করে AJAX কার্যকলাপ এবং WebSocket দিয়ে রিয়েল-টাইম ডেটা পাঠানোর ক্ষমতা।
- ইন্টারঅ্যাকটিভ UI: ব্যবহারকারীরা সহজেই মেসেজ পাঠাতে এবং অন্য ব্যবহারকারীদের মেসেজ দেখতে সক্ষম।
- Flask-SocketIO: WebSocket সংযোগের জন্য ব্যবহৃত হয়, যা ডেটা দ্রুত প্রেরণ করতে সক্ষম।
এই চ্যাট অ্যাপ্লিকেশনটি HTMX এবং WebSocket এর সমন্বয়ে রিয়েল-টাইম যোগাযোগের একটি বাস্তব উদাহরণ। আপনি এই ভিত্তিতে আপনার নিজস্ব ফিচার এবং কার্যকারিতা যুক্ত করতে পারেন।
Content added By
Read more
